.search-input-container {
  padding: 10px;
  margin: 0;

  input {
    padding-right: 26px;
  }
}

.search-empty-state {
  font-size: inherit;
}

.search-input-clear-button {
  top: 50%;
  right: 16px;
  line-height: 1;
  transform: translateY(-50%);
  display: flex;

  &:before {
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--text-muted);
    content: " ";
    @include svg-mask(
      '<path d="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"></path>',
      "0 0 24 24"
    );
  }
}

.search-empty-state {
  color: var(--text-faint);
  padding: 10px 8px;
  margin: 0;
}

.search-result-file-title {
  .tree-item-inner {
    padding: 6px 0 6px 2px;
  }

  &.is-clickable:hover {
    color: var(--text-normal);
    background: transparent;
  }
}

.search-result-file-matches {
  color: var(--text-normal);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  padding: 0 1px 0 0;
  border-bottom: none;
}

.search-info-more-matches {
  font-size: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  color: var(--text-normal);
}

.search-result-file-match {
  cursor: var(--cursor) !important;
  border-radius: var(--radius-m);
  padding: 6px 10px 6px 10px;
  margin-bottom: 5px;
  width: 100%;
  left: 0;

  &:not(.search-info-more-matches) {
    border: 3px solid transparent;
    background: var(--shade-0);
    box-shadow: 0px 0.5px 1px 0.5px rgba(0, 0, 0, 0.1);
    transition: border-color 150ms ease-out;

    .theme-dark & {
      border: 3px solid transparent;
      background: var(--shade-10);
    }

    &:hover {
      border: 3px solid hsla(var(--accent-hsl), 0.6);
    }
  }

  &.search-info-more-matches:hover {
    background: var(--shade-plus-darker);
  }

  &:hover {
    color: var(--text-normal);
  }

  &:after {
    display: none;
  }

  &:last-child {
    margin-bottom: 1rem;
  }
}

.search-result-container {
  @include vertical-scroll-shadow(var(--shade-5-opaque));

  padding-right: 10px;

  .theme-dark & {
    @include vertical-scroll-shadow(var(--shade-5-opaque), 0.2);
  }

  .is-translucent &,
  .is-mobile &,
  .workspace-fake-target-overlay & {
    background: none !important;
  }

  &:before {
    height: 1px;
  }

  &.is-loading:before {
    background-color: var(--background-modifier-accent);
  }
}

.search-result {
  margin-bottom: 0;
}

.search-result-file-matched-text {
  background: hsla(var(--accent-hsl), 0.15);

  .theme-dark & {
    background: hsla(var(--accent-hsl), 0.25);
  }
}
